<template>
    <div>
        <div id="title">
            <span id="back" @touchstart="back" class="fa fa-angle-left"></span>
            <span id="class">商品分类</span>
        </div>
        <div id="box">
            <div v-for="(n,i) in typeclass" class="little" @touchstart="find" ref="bbi">
                <span :class="{'linehigh':a==n.bigtype}">{{n.bigtype}}</span>
            </div>

        </div>
        <div id="bigbox">
            <div id="main">
                <keep-alive>
                    <whw :is="type"></whw>
                </keep-alive>
            </div>
            <div id="rightbox" ref="jiazai" @scroll="scroll">
                <div v-for="p in doglist" id="littlebox">
                    <img :src="p.img[0]">
                    <p>{{p.name}}</p>
                </div>
                <!-- <div id="spinner">
                    <span class="fa fa-spinner fa-spin"></span>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import First from "../components/First.vue"

export default {
    data: function() {
        return {
            type: "First",
            a: "狗狗",
            isLoading: false,
            currentScrollTop: 0

        }
    },
    computed: {
        ...mapState([
            "typeclass",
            "doglist",
            "b"
        ]),
        page: function() {
            return this.doglist.length
        }
    },
    mounted: function() {
        // console.log(this.b)
        var param = {
            title: this.a
        }
        this.$store.dispatch("requestdog", param);
        this.$store.dispatch("requesttypeclass");
    },
    methods: {
        scroll: function() {
            //  console.log(this.b)
            // //  console.log(this.$refs.jiazai.scrollTop)
            //  console.log(this.$refs.jiazai.scrollHeight-this.$refs.jiazai.offsetHeight-this.$refs.jiazai.scrollTop)
            // if (this.$refs.jiazai.scrollHeight - this.$refs.jiazai.offsetHeight - this.$refs.jiazai.scrollTop <= 10) {
            //     if (this.isLoading) {
            //         return;
            //     }
            //     this.isLoading = true;
            //     var param = {
            //         class: this.b,
            //         i: this.page
            //     }
            //     this.$store.dispatch("requestdoglist", param)


            // }
        },
        back: function() {
            history.back()
        },
        find: function(e, i) {
            this.a = e.target.textContent
            var param = {
                title: this.a
            }
            this.$store.dispatch("requestdog", param);

        }

    },
    components: {
        First,


    }
}
</script>

<style scoped>
#spinner {
    width: 100%;
    height: 5vh;
    text-align: center;
    line-height: 5vh;
}

#bigbox {
    display: flex;
}

#littlebox {
    width: 25vw;
    height: 20vh;
    /* border:solid 1px black;  */
    margin-top: 3vh;
    margin-left: 8vw;
    display: inline-block
}

img {
    width: 22.8vw;
    height: 10vh;
    margin: 0;
}

#title {
    width: 100%;
    height: 7vh;
    border: solid 1px gainsboro;
    line-height: 7vh;
}

#class {
    margin-left: 32vw;
    font-size: 18px;
}

#back {
    cursor: pointer;
    font-size: 28px;
    margin-left: 3vw;
}

#box {
    cursor: pointer;
    display: flex;
    width: 100%;
    height: 7vh;
    background-color: #f0f0f0;
}

.little {
    width: 25%;
    height: 7vh;
    border-bottom: solid 1px #dbdbdb;
    text-align: center;
    line-height: 7vh;
}

.linehigh {
    color: red;
}

#rightbox {
    width: 69vw;
    height: 86vh;
    overflow-y: scroll;
    /* border:solid 1px red;  */
    /* display: flex;
    flex-wrap: wrap; */
}

p {
    margin: 0;
    font-size: 12px;
    color: gray;
}
</style>